import React, { Component } from 'react'
import item from './index.module.css'
import  PropTypes from 'prop-types'


export default class List extends Component {
  // 对props接收传值的类型、必要性的限制
  // propTypes虽然在上面是大写  但这边需要小写开头 这边只是一个自己创建的名称
  static propTypes = {
    changeTodos:PropTypes.func.isRequired,//这边用的是上面声明的大写PropTypes
    id:PropTypes.string.isRequired,
    isTrue:PropTypes.bool.isRequired,
    done:PropTypes.string.isRequired,
  }
  state = {
    onMouse :false//鼠标移入移除状态
  }
  // 鼠标移入移除
  onMouseChange= (flag)=>{
    // console.log(flag);
    //由于下方调用函数时用的是小括号传参  所以这边必须保证是函数
    return ()=>{
      this.setState({onMouse:flag})
    }
  }
  // 点击切换状态
  changeCheck=(id)=>{
    return(event)=>{
      // console.log(event);
      this.props.changeTodos(id,event.target.checked)
    }
  }
  // 删除当前行
  delItem = (id)=>{
    console.log(this.props,23);
    this.props.delTodos(id)
  }
  render() {
    const { id, isTrue , done } = this.props  //这边定义do会报错 即便是传输过来的数据是do
    const {onMouse} = this.state
    return (
      <div style={{backgroundColor:onMouse?'#ddd':'white'}}  onMouseEnter={this.onMouseChange(true)} onMouseLeave={this.onMouseChange(false)} className={item.index}>
          <span><input type='checkbox' checked={isTrue} onChange={this.changeCheck(id)}/>{done}</span>
          <button onClick={()=>this.delItem(id) } style={{display:onMouse?'block':'none'}}>删除</button>
      </div>
    )
  }
}
